<template>
    <div class="user">
        <van-nav-bar title="兑换" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="cross" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>


        <div class="user-order2222" v-if="addressInfo">
            <div
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;padding-top: 10px;margin-left: 17px;">
                收货地址</div>
            <div style="display: flex;padding-top: 14px;" @click="selAddress">
                <div
                    style="padding-left: 17px;font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 16px;color: #272727">
                    {{ addressInfo.name }}</div>
                <div
                    style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 16px;color: #0A0A0A;padding-left: 11px;">
                    {{ addressInfo.mobile }}</div>
                <van-icon name="arrow" size="18" style="position: absolute;float: right;right: 30px;" />

            </div>
            <div style="height: 45px;">
                <div style="display: flex;margin-top: 8px;">
                    <div
                        style="margin-left: 17px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #4F4F4F;">
                        {{ addressInfo.address.substring(0, 25) }}</div>
                </div>
                <div
                    style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #4F4F4F;margin-left: 17px;margin-top: 4px;">
                    {{ addressInfo.address.substring(25, addressInfo.address.length) }}</div>
            </div>
            <div style="height: 10px;"></div>
        </div>
        <div class="user-order" v-else>
            <div
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;padding-top: 10px;margin-left: 17px;">
                收货地址</div>
            <div style="text-align: center;">
                <van-list :finished="true" :immediate-check="false">
                    <div class="main2">
                        <img src="@/assets/homr/Group 9420.png" alt="logo"
                            style="width: 180px;height: 120px;margin-top: 20px;">
                        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #666666;">
                            您当前暂未选择地址
                        </div>

                        <div style="margin-top: 15px;">
                            <van-button
                                style="width: 234px;height: 44px;border-radius: 50px;background-color: #fff;font-size: 16px;border: 1px solid #389138;color: #389138;"
                                @click="selAddress">+选择地址</van-button>
                        </div>
                        <div style="height: 20px;"></div>
                    </div>
                </van-list>
            </div>
        </div>


        <div class="user-order3">
            <div style="display: flex;padding-top: 16px">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #333333;margin-left: 23px;">
                    商品信息
                </div>
            </div>
            <div style="display: flex;padding-top: 20px;">
                <img :src="cankuInfo.goods.image" alt="" srcset=""
                    style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                <div
                    style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                    {{ cankuInfo.goods.name }}</div>

                <div style="padding-top: 70px;display: flex">
                    <div
                        style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
                        x1
                    </div>
                    <div
                        style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                        ￥{{ cankuInfo.price }}
                    </div>

                </div>

                <div
                    style="position: absolute;float:right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #151515;padding-top: 90px;">
                    合计：
                    <span
                        style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 17px;color: #2E512E;">￥{{
                            cankuInfo.price }}</span>
                </div>
            </div>
        </div>

        <div style="margin-top: 193px;text-align: center;">
            <van-button v-if="addressInfo" @click="lijiduihuan"
                style="width: 234px;height: 44px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;color: #fff;">立即兑换</van-button>

            <van-button v-else disabled
                style="width: 234px;height: 44px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;color: #fff;">立即兑换</van-button>
        </div>


        <van-popup v-model="showDialog" :style="{ height: '190px', width: '300px', borderRadius: '15px' }">
            <div class="dialog-content" style="text-align: center;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin: 36px;width: 242px;">
                    确认后请在“”商品订单“中查看， 是否确认兑换商品
                </div>
                <div style="text-align: center;display: flex;margin-top: 30px;">
                    <div style="width: 120px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="queding">
                        <div>确定</div>
                    </div>
                    <div style="width: 120px;height: 44px;background: #CCCCCC;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="cancek">
                        <div>取消</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { getStorechange, getAddress } from '@/api/user'
let previousRouterName = "";
let selectUser = "";

import { Toast } from 'vant';

export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            rawHtml: '',
            safeHtml: "",
            addressInfo: "",
            showDialog: false,
            cankuInfo: {},
            activeIndex: "",
        };
    },
    created() {
        this.activeIndex = this.$route.query.activeIndex
        if (previousRouterName === "Address") {
            this.addressInfo = selectUser
        } else {
            this.getAddress();
        }
        this.cankuInfo = JSON.parse(this.$route.query.cankuInfo);


    },
    beforeRouteEnter(to, from, next) {

        previousRouterName = from.name;
        if (from.name === "Address") {
            selectUser = from.params.addressInfo;
        }
        next();
    },
    methods: {
        getAddress() {
            let obj = {
                page: 1,
                pageSize: 100
            }
            getAddress(obj).then((res) => {

                if (res.data.list.length > 0) {
                    for (let i = 0; i < res.data.list.length; i++) {
                        if (res.data.list[i].is_default == "1") {
                            this.addressInfo = res.data.list[i]
                            res.data.list[i].address = res.data.list[i].province + res.data.list[i].city + res.data.list[i].country + res.data.list[i].detail
                            break
                        } else {
                            this.addressInfo = res.data.list[0]
                            res.data.list[0].address = res.data.list[0].province + res.data.list[0].city + res.data.list[0].country + res.data.list[0].detail
                        }

                    }
                }

            })
        },
        lijiduihuan() {
            this.showDialog = true
        },

        queding() {
            let obj = {
                ids: this.cankuInfo.order_id,
                address_id: this.addressInfo.id
            }
            getStorechange(obj).then((res) => {
                this.showDialog = false
                Toast({
                    message: '<img src="../../img/icon.png" style="margin-right:5px;width:20px;height:20px;"></i><span>兑换成功</span>',
                    type: 'html',
                });
                this.$router.back()
            })

        },
        cancek() {
            this.showDialog = false
        },
        selAddress() {
            this.$router.push({
                path: "/address",
                query: {
                    addressInfo: this.addressInfo
                }
            })
        },
        onClickLeft() {
            this.$route.params.active = this.activeIndex
            this.$router.back()
        }
    },
    computed: {

    }
}
</script>

<style scoped>
.user-order {
    width: 702px;
    height: 520px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}

.user-order2222 {
    width: 702px;
    height: 240px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}

.user-order3 {
    width: 702px;
    height: 340px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>